import React from "react";
import UEditor from '../../components/ueditor';

export default class Post extends React.Component {

    constructor(...props) {
        super(...props);
        this.state = {
            title: '',
            content: '',
            loading: false
        };
    }

    componentDidMount() {
        if (this.props.params.newsId) {
            $.get('/admin/news/view?id=' + this.props.params.newsId, (data)=> {
                this.setState({title: data.title, content: data.content});
            }, 'json');
        }
    }

    onInputChange(e) {
        this.setState({
            [e.target.id]: e.target.value
        });
    }

    onContentChange(content) {
        this.setState({content});
    }

    onSubmit(e) {
        e.preventDefault();
        if (!this.state.title) {
            alert('请填写文章标题');
            return;
        }
        if (!this.state.content) {
            alert('请填写文章内容');
            return;
        }
        this.setState({loading: true});
        $.post('/admin/news/post?id=' + (this.props.params.newsId || 0), {
            title: this.state.title,
            content: this.state.content
        })
            .success((data)=> {
                this.setState({loading: false});
                alert('操作成功');
                this.context.router.push('/news');
            }, 'json')
            .error((e)=> {
                this.setState({loading: false});
                alert(e.responseJSON.errmsg);
            }, 'json');
    }

    render() {
        return (
            <div className="site-news news-post">
                <h2>{this.props.params.newsId ? '编辑文章' : '添加文章'}</h2>
                <form action="" className="form-horizontal" onSubmit={e=>this.onSubmit(e)}>
                    <div className="form-group">
                        <label htmlFor="title" className="control-label col-md-2">标题</label>
                        <div className="col-md-6">
                            <input type="text" id="title" className="form-control" value={this.state.title}
                                   onChange={e=>this.onInputChange(e)}/>
                        </div>
                    </div>
                    <div className="form-group">
                        <label htmlFor="content" className="control-label col-md-2">内容</label>
                        <div className="col-md-8">
                            <UEditor name="content" content={this.state.content}
                                     height={400}
                                      onContentChange={content=>this.onContentChange(content)}/>
                        </div>
                    </div>

                    <div className="form-group">
                        <div className="col-md-2 col-md-offset-2">
                            <button className="btn btn-primary btn-block"
                                    disabled={this.state.loading}>{this.state.loading ? '提交中' : '提交'}</button>
                        </div>
                    </div>
                </form>
            </div>)
    }
}

Post.contextTypes = {
    router: React.PropTypes.object.isRequired
};